<template>
  <Form :label-width="150" class="c-cliTimer-service" :show-message="false">
  <Steps :current="vCurrent" direction="vertical" style="overflow-y: auto;height:95%;">
    <Step :title="$t(`compDesign.jProperty.timerBaseInfo`)" style="cursor: pointer"
      icon="md-radio-button-on" status="process" @click.native="vCurrent = 0">
      <template slot="content">
        <FormItem :label="$t(`compDesign.jProperty.timerName`)" >
          <field-cell :config="{type:'text'}" @change="$emit('updateEvent')"
            v-model="data[index].name"/>
        </FormItem>
        <FormItem :label="$t(`compDesign.jProperty.timerDescrib`)" >
          <field-cell :config="{type:'text'}" @change="$emit('updateEvent')"
            v-model="data[index].describ"/>
        </FormItem>
        <FormItem :label="$t(`compDesign.jProperty.timerStatus`)" >
          <field-cell :config="{ type:'select', options: describList}"
            @change="$emit('updateEvent')"
            v-model="data[index].status"/>
        </FormItem>
        <FormItem :label="$t(`compDesign.jProperty.timerInterval`)" >
          <field-cell :config="{ type:'number', min: 5 }"
            @change="$emit('updateEvent')"
            v-model="data[index].interval"/>
        </FormItem>
      </template>
    </Step>
    <Step :title="$t(`compDesign.jProperty.actionName`)" style="cursor: pointer"
      icon="md-list-box" status="process" @click.native="vCurrent = 1">
      <FormItem slot="content" :label="$t(`compDesign.jProperty.eventName`)" >
          <field-cell :config="{ type:'cascader', options: actionCascaderData}"
            @change="$emit('updateEvent')"
            v-model="data[index].event"/>
      </FormItem>
    </Step>
    <Step :title="$t(`compDesign.jProperty.actionParams`)" style="cursor: pointer"
      icon="md-list-box" status="process" @click.native="vCurrent = 2">
      <div slot="content">
        <starGrid class="formItemWp" :column="'30px 100px auto 60px'" :area="'a b c d'">
          <starLabel :label="`#`" style="grid-area: a"></starLabel>
          <starLabel :label="$t(`compDesign.jProperty.name`)" style="grid-area: b"></starLabel>
          <starLabel :label="$t(`compDesign.jProperty.value`)" style="grid-area: c;justify-content: center;" />
          <starLabel :label="$t(`compDesign.jProperty.action`)" style="grid-area: d"></starLabel>
        </starGrid>
        <starGrid class="formItemWp" v-for="(item, i) in data[index].eventParam"
          :key="i" :column="'30px 100px auto 60px'" :area="'a b c d'">
          <starLabel :label="`${i}`" style="grid-area: a"></starLabel>
          <Input readonly style="grid-area: b"
            v-model="data[index].eventParam[i][0]"></Input>
          <Input readonly style="grid-area: c"
            v-model="data[index].eventParam[i][1]"></Input>
          <Button size="small" style="grid-area: d;" @click="removeServiceParamItem(i)">-</Button>
        </starGrid>
        <starGrid class="formItemWp" :column="'30px 100px auto 60px'" :area="'a b c d'">
          <starLabel :label="'*'" style="grid-area: a"></starLabel>
          <Input v-model="newServiceParamName"></Input>
          <Input style="grid-area: c" v-model="newServiceParamValue"></Input>
          <Button style="grid-area: d;" @click="addServiceParamItem">+</Button>
        </starGrid>
      </div>
    </Step>
    
    <Step v-if="compGroup.classGroup" :title="$t(`compDesign.jProperty.operationObj`)"
      style="cursor: pointer" icon="md-pin" status="process" @click.native="vCurrent=2">
      <div slot="content">
        <starGrid slot="content" :row="'40px'" :column="'150px auto 300px'" :area="'a b c'" :layout="true"
          style="justifyContent:inherit;width:100%;">
          <starLabel :label="$t(`compDesign.jProperty.object`)" style="grid-area: a"></starLabel>
          <Input required="true" style="grid-area: b"
            v-model="data[index].objectId"></Input>
          <Select style="grid-area: c" clearable
            v-model="data[index].objectId" transfer
            @on-change="$emit('updateEvent')">
            <Option v-for="(item,i) in compGroup.classGroup" :key="i" :label="`${item.tag}-${item.title}`"
            :value="item.id"></Option>
          </Select>
        </starGrid>
        <starGrid slot="content" :row="'40px'" :column="'150px auto'" :area="'a b'"
          :layout="true" style="justifyContent:inherit;height:40px;width:100%;">
          <starLabel :label="$t(`compDesign.jProperty.objectMethod`)" style="grid-area: a"></starLabel>
          <Select style="grid-area: b" transfer clearable
            v-model="data[index].resMethod"
            @on-change="$emit('updateEvent')">
            <Option value="queryData">queryData</Option>
          </Select>
        </starGrid>
      </div>
    </Step>
  </Steps>
  </Form>
</template>

<script>
// import fieldCell from 'public/components/function/wizard/fields/cfg-cell'

export default {
  name: 'part-service',
  // components: { fieldCell },
  data() {
    return {
      vCurrent: 0,
      newServiceParamName: '',
      newServiceParamValue: '',
      actionCascaderData: [],
      describList: [
        {label: 'start', value: 'start'},
        {label: 'suspend', value: 'suspend'},
        {label: 'stop', value: 'stop'},
      ]
    }
  },
  props: {
    index: {
      default: () => {
        return 0;
      }
    },
    compGroup: {
        default: () => {
            return {};
        }
    },
    data: {
        default: () => {
            return [];
        }
    }
  },
  mounted() {
    this.getActionCascader();
  },
  methods: {
    /**
     * 获取action级联数据
     */
    getActionCascader() {
      this.compGroup.getEventCascader().then(res => {
        this.actionCascaderData = res;
      })
      this.compGroup.getEventMap().then(res => {
          this.actionCascaderData = res.recordsCascader;
          // this.eventMap = res.recordsMap
      })
    },
    addServiceParamItem() {
      if (!this.newServiceParamName || this.newServiceParamValue === '') return false;
      if (!!this.newServiceParamName && this.newServiceParamValue !== '') {
        this.data[this.index].eventParam.push(
          [this.newServiceParamName, this.newServiceParamValue]
        )
        this.newServiceParamName = '';
        this.newServiceParamValue = '';
        this.$emit('updateEvent');
      }
    },
    removeServiceParamItem(index) {
      this.data[this.index].eventParam.splice(index, 1)
      this.$emit('updateEvent');
    },
  }
}
</script>

<style lang="less">
.c-cliTimer-service {
  .ivu-form-item {
    margin-bottom: 12px;
  }
  .ivu-form-item-label {
    height: 32px;
    line-height: 1.5;
    padding: 4px 7px;
    border: 1px solid #dcdee2;
    border-radius: 4px;
    color: #515a6e;
    background-color: #f7f7f7;
  }
  .ivu-form-item-content {
    padding-left: 6px;
    line-height: 1;
    .ivu-input {
      border-radius: 4px;
    }
  }
  .formItemWp {
    width: 100%!important;
    height: 40px!important;
    justify-content: inherit!important;
    border: none;
  }
}
</style>
